<template>
  <div>
    <div class="context">
      <div id="map" />
      <div class="bottom_progress">
        <div>
          <div
            style="width: 30px; height: 30px; float: left; margin-right: 30px"
          >
            <el-button
              class="playbtn"
              type="primary"
              icon="al-icon-carplay"
              size="mini"
              circle
              @click="clickPlayBtn"
            />
          </div>
          <div style="float: left" @mousedown="progressUIValue">
            <el-slider
              v-model="progressIndex"
              style="width: 400px"
              :max="posLength"
              :step="1"
              :format-tooltip="formatTooltip"
              @change="progressValueChange"
            />
          </div>
          <div style="float: left; margin-left: 30px">
            <el-select v-model="temp">
              <el-option
                v-for="item in tempCount"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import i18n from '@/utils/lang/index'
import {
  sendThis,
  Load_Map,
  _iMap,
  _TransPixel,
  TagStyle,
  _Style,
  updateOverlayPosition,
  FenceStyle,
  _TransMetric,
  _TransMetricFence,
  _dPR
} from '@/utils/historyMap.js'
import {
  webSockUrl,
  webSockStatisticsUrl,
  cameraServerUrl,
  baseUrl,
  initPicPath,
  webSockMonitorUrl,
  rateHeartShow
} from '@/utils/global'
import { Vector as VectorSource } from 'ol/source.js'
import { Vector as VectorLayer } from 'ol/layer.js'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { LineString } from 'ol/geom.js'
import { Style, Stroke } from 'ol/style.js'

export default {
  props: ['maps'],

  data() {
    return {
      mapId: '',

      model: '',

      TagSource: null,
      TagLayer: null,
      lineSource: null,
      lineLayer: null,
      temp: 100,
      trackData: [],
      currentPos: 1,
      feature_: null,
      setTImeOut_: null,
      tempCount: [
        {
          value: 50,
          label: '16x'
        },
        {
          value: 100,
          label: '8x'
        },
        {
          value: 200,
          label: '4x'
        },
        {
          value: 400,
          label: '2x'
        }
      ],
      posLength: 0,

      progressIndex: 0
    }
  },
  watch: {
    maps: {
      handler(newValue, oldValue) {
        const RES = this.maps
        $('#map').empty()
        Load_Map(
          baseUrl + '/file' + RES.mapPath,
          RES.mapActualX,
          RES.mapActualY,
          RES.mapPixelX,
          RES.mapPixelY,
          RES.mapPixelX / RES.mapActualX,
          [RES.mapOriginX, RES.mapOriginY]
        )
        console.log( baseUrl + '/file' + RES.mapPath,)
        this.loadLayer()
      },
      deep: true
    }
  },
  methods: {
    drawLine() {
      var self = this
      self.progressIndex = self.currentPos
      if (self.currentPos > self.posLength || self.posLength == 0) {
        return
      }
      if (
        self.currentPos == self.posLength ||
        self.currentPos == self.posLength - 1
      ) {
        // 点位移动
        var from = _TransPixel([
          self.trackData[self.posLength - 1].posX,
          self.trackData[self.posLength - 1].posY
        ])

        self.feature_.getGeometry().setCoordinates(from)
      } else {
        var from = _TransPixel([
          self.trackData[self.currentPos].posX,
          self.trackData[self.currentPos].posY
        ])
        var to = _TransPixel([
          self.trackData[self.currentPos + 1].posX,
          self.trackData[self.currentPos + 1].posY
        ])
        // 点位移动
        self.feature_.getGeometry().setCoordinates(to)
        // 画线
        var lineFeature = new Feature(new LineString([from, to]))
        self.lineSource.addFeature(lineFeature)
      }
      self.currentPos++
      self.setTImeOut_ = setTimeout(function() {
        self.drawLine()
      }, self.temp)
    },
    progressValueChange(val) {
      this.currentPos = val
      this.lineSource.clear(true)
      if (this.posLength != 0) {
        $('.playbtn i').attr('class', 'al-icon-carpause')
      }
      this.drawLine()
    },
    formatTooltip(val) {
      if (this.posLength != 0) {
        if (
          this.currentPos == this.posLength ||
          this.currentPos > this.posLength
        ) {
          return this.trackData[this.posLength - 1].speed
        } else {
          return this.trackData[this.currentPos].speed
        }
      }
    },
    progressUIValue() {
      $('.playbtn i').attr('class', 'al-icon-carplay')
      clearTimeout(this.setTImeOut_)
    },
    clickPlayBtn() {
      const className = $('.playbtn i').attr('class')
      if (className === 'al-icon-carplay') {
        // 处于暂定状态
        $('.playbtn i').attr('class', 'al-icon-carpause')
        this.drawLine()
      } else if (className === 'al-icon-carpause') {
        // 处于播放状态
        $('.playbtn i').attr('class', 'al-icon-carplay')
        clearTimeout(this.setTImeOut_)
      }
    },
    loadLayer() {
      this.TagSource = new VectorSource({
        wrapX: false
      })
      this.TagLayer = new VectorLayer({
        source: this.TagSource,
        style: function(feature) {
          return TagStyle(feature, 0)
        }
      })
      this.lineSource = new VectorSource({
        wrapX: false
      })
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
        style: new Style({
          stroke: new Stroke({
            color: 'green',
            width: 3
          })
        })
      })
      _iMap.addLayer(this.lineLayer)
      _iMap.addLayer(this.TagLayer)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.context {
  padding: 0;
  width: 100%;
  height: calc(100% - 60px);
    position: relative;
}
.context div {
  float: left;
}
#map {
  width: 100%;
  height: 100%;
}
</style>
